import React, { FC, useEffect } from 'react';
import { Graph, Shape } from '@antv/x6';

const AntV_X6: FC = () => {
  const data = {
    nodes: [
      {
        id: 'node1',
        shape: 'rect', // 使用 rect 渲染
        x: 100,
        y: 200,
        width: 80,
        height: 40,
        label: 'hello',
      },
      {
        id: 'node2',
        shape: 'ellipse', // 使用 ellipse 渲染
        x: 300,
        y: 200,
        width: 80,
        height: 40,
        label: 'world',
      },
    ],
    edges: [
      {
        source: 'node1',
        target: 'node2',
      },
    ],
  };
  useEffect(() => {
    create();
  }, []);
  const create = () => {
    const graph = new Graph({
      container: document.getElementById('container') || undefined,
      width: 800,
      height: 600,
      snapline: true, // 对齐线
      background: {
        color: '#fff', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      scroller: false, // 滚动
      panning: {
        // 画布平移
        enabled: true, // 启用画布平移
        modifiers: 'shift', // 需要按下修饰键,方可平移
      },
    });
    // 创建节点
    const rect1 = new Shape.Rect({
      x: 100,
      y: 200,
      width: 80,
      height: 40,
      angle: 30,
      attrs: {
        body: {
          fill: '#2ECC71', // 背景颜色
          stroke: '#000', // 边框颜色
        },
        label: {
          text: 'rect1', // 文本
          fill: '#333', // 文字颜色
          fontSize: 13, // 文字大小
        },
      },
    });
    // 创建节点
    const rect2 = new Shape.Rect({
      x: 300,
      y: 200,
      width: 80,
      height: 40,
      angle: 30,
      attrs: {
        body: {
          fill: '#2ECC71', // 背景颜色
          stroke: '#000', // 边框颜色
        },
        label: {
          text: 'rect2', // 文本
          fill: '#333', // 文字颜色
          fontSize: 13, // 文字大小
        },
      },
    });

    // 创建边
    const edge = new Shape.Edge({
      source: rect1,
      target: rect2,
      vertices: [
        { x: 100, y: 200 },
        { x: 300, y: 120 },
      ],
    });

    graph.fromJSON(data);
    // 添加到画布
    graph.addNode(rect1);
    graph.addNode(rect2);
    graph.addEdge(edge);
    graph.addNode({
      id: 'ports_1',
      x: 60,
      y: 60,
      width: 160,
      height: 80,
      label: 'Rect With Ports',
      ports: {
        groups: {
          group1: {
            attrs: {
              circle: {
                r: 6,
                magnet: true,
                stroke: '#31d0c6',
                strokeWidth: 2,
                fill: '#fff',
              },
            },
            position: {
              name: 'left',
              args: {},
            },
          },
        },
        items: [
          {
            id: 'port1',
            group: 'group1', // 指定分组名称
            attrs: {
              text: {
                // 标签选择器
                text: 'port1', // 标签文本
              },
            },
          },
          {
            id: 'port2',
            group: 'group1', // 指定分组名称
          },
          {
            id: 'port3',
            group: 'group1', // 指定分组名称
          },
        ],
      },
    });
    graph.addEdge({
      source: { x: 40, y: 100 },
      target: {
        cell: 'ports_1',
        port: 'port1', // 链接桩 ID
      },
    });
    graph.centerContent(); // 将画布内容中心与视口中心对齐
  };
  return <div id="container"></div>;
};

export default AntV_X6;
